<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:outputStylesheet library="css" name="main.css" />
    <h:head>
        <script src="resources/js/jquery-1.8.1.min.js" type="text/javascript"/>
        <script src="resources/js/highcharts.js" type="text/javascript"/>
        <script src="resources/js/graphMaker.js" type="text/javascript"/>
        <h:outputStylesheet library="css" name="main.css" />

        <title>Information om resa</title>        
    </h:head>
    <h:body>
        <ui:composition template="WEB-INF/facelets/template.xhtml">  
        <ui:define name="content">  
        <div id="journeyHeader">
            <h:outputLabel value="#{journeyBean.selectedJourney.line}, #{journeyBean.selectedJourney.startTimeString}"/><br/><br/>
        </div>
        <div id="journeyStops">
            <table>
                <tr>
                    <th>
                        <h:outputLabel value="Id"/>
                    </th>
                    <th>
                        <h:outputLabel value="Namn"/>
                    </th>
                    <th>
                        <h:outputLabel value="Försening"/>
                    </th>
                </tr>
                <c:forEach var="stop" items="#{journeyBean.selectedJourney.stops}" >  
                    <script type="text/javascript">
                        addToArray(#{stop.delay})
                    </script>
                    <tr>
                        <td>
                            <h:outputLabel value="#{stop.stopNr}"/><br/>
                        </td>
                        <td>
                            <h:outputLabel value="#{stop.name}"/><br/>
                        </td>
                        <td>
                            <h:outputLabel value="#{stop.delay}"/><br/>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
        <div id="diagramContainer"/>
        </ui:define>
        </ui:composition>
    </h:body>
</html>
